<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Information</title>
    <style>
        #studentList {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            max-width: 500px;
            overflow: auto;
        }
        input[type="text"] {
            margin-top: 10px;
            padding: 5px;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
<h1>学生表信息</h1>
<button id="getStudentsBtn">获取学生信息</button>
<div id="studentList"></div>

<script>
    document.getElementById('getStudentsBtn').addEventListener('click', function() {
        // 使用Ajax获取学生信息
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost:8080/api/students', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    // 获取到学生信息后，将其显示在页面上
                    var students = JSON.parse(xhr.responseText);
                    console.log(students)
                    var studentListDiv = document.getElementById('studentList');
                    var html = '<ul>';
                    students.forEach(function (student) {
                        html += '<li>' + student.id + ' - ' + student.name + ' - ' + student.sex + ' - ' + student.jobNumber + '</li>';
                    });
                    html += '</ul>';
                    studentListDiv.innerHTML = html;

                    // 添加搜索功能
                    var inputBox = document.createElement('input');
                    inputBox.setAttribute('type', 'text');
                    inputBox.setAttribute('placeholder', '输入姓名进行搜索');
                    inputBox.addEventListener('input', function() {
                        var filter = inputBox.value.toUpperCase();
                        var ul = studentListDiv.querySelector('ul');
                        var li = ul.getElementsByTagName('li');
                        for (var i = 0; i < li.length; i++) {
                            var name = li[i].textContent.split(' - ')[1];
                            if (name.toUpperCase().indexOf(filter) > -1) {
                                li[i].style.display = "";
                            } else {
                                li[i].style.display = "none";
                            }
                        }
                    });
                    studentListDiv.prepend(inputBox);
                } else {
                    console.error('Failed to fetch student information');
                }
            }
        };
        xhr.send();
    });
</script>
</body>
</html>
